<template>
  <div class="container" >
   <el-dialog
  title="举报反馈"
  :visible.sync="showAccusation"
  width="505px"
  center
  :before-close="handleClose">

  <el-form
  ref="form"
  :model="form"
  :rules="rules"
  label-position="top"
   label-width="140px">
   <el-form-item label="举报类型（必选）" prop="type">
    <el-radio-group v-model="form.type">

      <el-radio v-for="item in options" :key="item.label" :label="item.label" >{{item.name}}</el-radio>
    </el-radio-group>
  </el-form-item>

  <el-form-item label="举报详情（选填）" >
    <el-input type="textarea"  placeholder="请详细描述举报原因，我们将第一时间核实处理" :autosize="{ minRows: 5, maxRows: 8}" v-model="form.remark"></el-input>
  </el-form-item>
  </el-form>

  <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="clickOk">确认举报</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
import { addReport } from '@/api/article'
export default {
  name: 'Report',
  props: ['articleId', 'showAccusation'],
  data () {
    return {
      form: {
        type: '',
        remark: ''
      },
      options: [
        {
          label: 0,
          name: '其他问题'
        },
        {
          label: 1,
          name: '标题夸张'
        },
        {
          label: 2,
          name: '低俗色情'
        },
        {
          label: 3,
          name: '错别字多'
        },
        {
          label: 4,
          name: '旧闻重复'
        },
        {
          label: 5,
          name: '涉嫌广告'
        },
        {
          label: 6,
          name: '内容抄袭'
        },
        {
          label: 7,
          name: '政治相关'
        },
        {
          label: 8,
          name: '内容不实'
        },
        {
          label: 9,
          name: '涉嫌违法犯罪'
        },
        {
          label: 10,
          name: '侵犯名誉/隐私/著作/肖像权等'
        }
        // '举报类型： 0-其他问题，1-标题夸张，2-低俗色情，3-错别字多，4-旧闻重复，5-广告软文，6-内容不实，7-涉嫌违法犯罪，8-侵权'
      ],
      rules: {
        type: [
          { required: true, message: '举报类型（必选）', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    clickOk () {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          const res = await addReport({ ...this.form, article_id: this.articleId })
          if (res) {
            this.$message.success('您已举报该篇文章，工作人员在24小时内审核出结果')
            this.$emit('showAccusation')
          }
        } else {
          // return false;
        }
      })
    },
    // 点击关闭对话框
    handleClose (done) {
      // done();
      this.$emit('showAccusation')
      // this.$refs.form.resetFields()
    }

  }
}
</script>
<style lang="scss" scoped>

.container {

  .el-radio{
    line-height:40px;
  }
  .el-button{
    width: 100%;
  }
  // .el-dialog .el-dialog--center{
  //   w
  // }

}
</style>
